<template>
    <div class="head">
        <div class="fl">
            <div class="time">
                <p class="t boxDay">{{ dateWeek }}</p>
                <p class="t boxDate">{{ dateYear }}</p>
                <p class="t boxTime">{{ dateDay }}</p>
            </div>
            <div class="tq">
                <div class="l1">
                    <!-- <img :src="weatherData.observe.weather_img" /> -->
                    <text style="padding-right: 10px">{{ weatherData.observe.weather
                        }}</text>
                    <text>{{ weatherData.observe.weather_current
                        }}°C</text>
                </div>
                <div class="l2">空气质量{{ weatherData.air.aqi }}</div>
            </div>
        </div>
        <div class="cn">
            <img class="img1" src="@/assets/icon/ky_left.png" />
            <div class="title"><img src="@/assets/icon/logo.png" />{{ title }}</div>
            <img class="img2" src="@/assets/icon/ky_right.png" />
        </div>
        <div class="fr">

        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import dayjs from 'dayjs'

const props = defineProps({
    title: {
        type: String,
        default: '南县智慧燃气二维管理'
    }
})
/*
 *时间天气显示
 */
const dateDay = ref(null)
const dateYear = ref(null)
const dateWeek = ref(null)
const weekday = ref([
    '星期日',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六'
])
const timer = ref(null)
timer.value = setInterval(() => {
    const date = dayjs(new Date())
    dateDay.value = date.format('HH:mm:ss')
    dateYear.value = date.format('YYYY-MM-DD')
    dateWeek.value = date.format(weekday.value[date.day()])
}, 1000)

const weatherData = ref({
    air: {},
    observe: {},
});
const jsonp = (options) => {
    // 动态创建script标签
    var script = document.createElement("script");
    // 拼接字符串的变量
    var params = "";

    for (var attr in options.data) {
        params += "&" + attr + "=" + options.data[attr];
    }
    // klJsonp0124741
    var fnName = "klJsonp" + Math.random().toString().replace(".", "");

    // 我们要想办法将它变成全局函数
    window[fnName] = options.success;
    // 为script标签添加src属性
    script.src = options.url + "?callback=" + fnName + params;
    // 将script标签追加到页面中
    document.body.appendChild(script);
    // 为script标签添加onload事件
    script.onload = function () {
        document.body.removeChild(script);
    };
};
//获取天气信息
const getWeather = () => {
    jsonp({
        url: "https://wis.qq.com/weather/common",
        method: "get",
        data: {
            source: "pc",
            weather_type: "observe|air|forecast_24h",
            province: "湖南省",
            city: "益阳市",
            county: "南县",
        },
        success: function (res) {
            let day = {
                1: "星期一",
                2: "星期二",
                3: "星期三",
                4: "星期四",
                5: "星期五",
                6: "星期六",
                0: "星期日",
            };
            weatherData.value = res.data;
            weatherData.value.observe.weather_img =
                "https://mat1.gtimg.com/pingjs/ext2020/weather/pc/icon/currentweather/day/" +
                res.data.observe.weather_code +
                ".png";
            weatherData.value.observe.weather_current =
                res.data.forecast_24h[1].min_degree +
                "-" +
                res.data.forecast_24h[1].max_degree;

            for (let i = 0; i < 8; i++) {
                weatherData.value.forecast_24h[i].day =
                    day[new Date(weatherData.value.forecast_24h[i].time).getDay()];
            }
        },
    });
};
/*
 *时间天气显示结束
 */
onMounted(() => {
    getWeather();
});
</script>
<style lang="scss" scoped>
@font-face {
    font-family: 'ysbth';
    src: url('/static/ttf/ysbth.TTF');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'yjsz';
    src: url('/static/ttf/yjsz.TTF');
    font-weight: normal;
    font-style: normal;
}

.head {
    display: flex;
    height: 68px;
    // line-height: 68px;
    background-color: transparent;
    color: #fff;
    z-index: 999;
    position: relative;
    width: 100%;
    pointer-events: none;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 68px;
        background: linear-gradient(to bottom, #051936 20%, rgb(0 0 0 / 0%));
        z-index: -9;
        pointer-events: none;
    }

    .fl {
        display: flex;
        height: 68px;
        width: 30%;
        position: relative;
        z-index: 101;
        font-family: ysbth;

        &::after {
            position: absolute;
            bottom: calc(50% + 5.7px);
            right: 0;
            content: '';
            width: 90%;
            height: 3px;
            background: url(@/assets/icon/ky_headleft_imgtop.png) no-repeat;
            background-size: 100%;
        }

        .l1 {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 700;

            img {
                width: 15px;
                margin-right: 10px;
            }

            text {
                margin-top: 0px;
            }
        }

        .l2 {
            padding: 0 10px;
            font-family: ysbth;
        }

        .time {
            display: flex;
            font-family: yjsz;
            font-size: 15px;
            width: 260px;
            position: absolute;
            top: 6px;
            left: 10%;
        }

        .tq {
            display: flex;
            font-family: yjsz;
            font-size: 15px;
            width: 240px;
            position: absolute;
            top: 30px;
            left: 10%;
        }

        .t {
            margin: 0 5px;
            font-family: ysbth;
        }
    }

    .cn {
        width: 40%;
        text-align: center;
        display: flex;
        position: relative;

        .img1 {
            position: absolute;
            left: 0;
            top: 10px;
            width: 41px;
            height: 61px;
        }

        .img2 {
            position: absolute;
            right: 0;
            top: 10px;
            width: 41px;
            height: 61px;
        }

        .title {
            width: calc(100% - 82px);
            text-align: center;
            position: absolute;
            left: 41px;
            height: 62px;
            line-height: 62px;
            top: 7px;
            background: url(@/assets/icon/ky_center_line.png);
            white-space: nowrap;
            font-size: 42px;
            text-shadow: 0rem 0rem 1rem rgba(13, 210, 253, 0.3);
            letter-spacing: 2px;
            font-family: ysbth;

            img {
                margin-right: 10px;
            }

            &::before {
                position: absolute;
                top: 0;
                left: -0.1rem;
                content: '';
                width: .3rem;
                height: .3rem;
                border-radius: 50%;
                background-color: #fff577;
            }

            &::after {
                position: absolute;
                top: 0;
                right: -0.1rem;
                content: '';
                width: .3rem;
                height: .3rem;
                border-radius: 50%;
                background-color: #fff577;
            }
        }
    }

    .fr {
        display: flex;
        height: 68px;
        width: 30%;
        position: relative;

        &::after {
            position: absolute;
            bottom: calc(50% + 5px);
            left: 0;
            content: '';
            width: 90%;
            height: 3px;
            background: url(@/assets/icon/ky_headright_imgtop.png) no-repeat;
            background-size: 100%;
        }
    }
}
</style>